<template>
  <div class="wrap">
    <div class="w-top">
      <video
        :id="videoName"
        :ref="videoName"
        controls
        autoplay
        autobuffer
        muted
        preload="auto"
        allowfullscreen="true"
        :width="vWidth"
        :height="vHeight"
        style="position: absolute;"
      />
      <canvas
        v-if="isCropper"
        id="canvasId"
        ref="canvasId"
        style="position: absolute;"
        :width="vWidth"
        :height="vHeight"
        @mousedown="onMousedown"
        @mouseup="onMouseup"
        @mousemove="onMousemove"
        @dblclick="onDblclick"
      />
      <div style="clear: both;" />
    </div>
    <canvas
      id="canvasShot"
      ref="canvasShot"
      style="display: none;"
      :width="vWidth"
      :height="vHeight"
    />
  </div>
</template>
<script>
import adapter from 'webrtc-adapter'
import WebRtcStreamer from './webrtcstreamer'
export default {
  name: 'WebRtcStreamer',
  props: {
    // location.protocol+"//"+window.location.hostname+":"+window.location.port
    serveUrl: {
      type: String,
      default: ''
    },
    rtspUrl: {
      type: String,
      default: ''
    },
    vWidth: {
      type: Number,
      default: 764
    },
    vHeight: {
      type: Number,
      default: 430
    },
    isCropper: {
      type: Boolean,
      default: false
    },
    // index 多个组件必填 否则会只显示一个视频
    index: {
      type: String,
      default: ''
    },
    strokeColor: {
      type: String,
      default: '#00FF89'
    },
    // 框选起始位置 边界值
    xLeft: {
      type: Number,
      default: 0
    },
    yTop: {
      type: Number,
      default: 0
    },
    // 视频大小与实际比
    xRate: {
      type: Number,
      default: 1
    },
    yRate: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ctx: '',
      _x1: '',
      _y1: '',
      _x2: '',
      _y2: '',
      drawing: false,
      picSizeW: '',
      picSizeH: '',
      picUrl: '',
      webRtcServer: null,
      videoName: ''
    }
  },
  watch: {
    strokeColor() {
      this.draw()
    }
  },
  created() {
    this.videoName = 'video' + this.index
  },
  mounted() {
    this.init()
    if (this.isCropper) {
      this.draw()
    }
  },
  destroyed() {
    this.webRtcServer.disconnect()
  },
  methods: {
    init(url) {
      let webrtcUrl = ''
      if (process.env.VUE_APP_WEBRTC_SERVER_URL) {
        webrtcUrl = process.env.VUE_APP_WEBRTC_SERVER_URL
      } else if (process.env.VUE_APP_WEBRTC_SERVER_PORT) {
        webrtcUrl = location.protocol + '//' + window.location.hostname + ':' + process.env.VUE_APP_WEBRTC_SERVER_PORT
      }

      const serveUrl = this.serveUrl || webrtcUrl
      if (this.webRtcServer) { this.webRtcServer.disconnect() }
      this.webRtcServer = new WebRtcStreamer(this.videoName, serveUrl)
      this.webRtcServer.connect(url || this.rtspUrl)
    },
    draw() {
      const cid = this.$refs.canvasId
      this.ctx = cid.getContext('2d')
      this.ctx.lineWidth = 2
      this.ctx.strokeStyle = this.strokeColor
    },
    // 双击全屏
    onDblclick() {
      // const videoEl = this.$refs[this.videoName]
      // videoEl.requestFullscreen()
    },
    onMousedown(e) {
      if (this.drawing) {
        this.drawing = false
        return
      }
      this._x1 = e.layerX < this.xLeft ? this.xLeft : e.layerX
      this._y1 = e.layerY < this.yTop ? this.yTop : e.layerY
      this.drawing = true
    },
    onMouseup(e) {
      this.drawing = false
      if (this._x2 < this._x1) {
        const t = this._x2
        this._x2 = this._x1
        this._x1 = t
      }
      if (this._y2 < this._y1) {
        var t = this._y2
        this._y2 = this._y1
        this._y1 = t
      }
      this.picSizeW = this._x2 - this._x1
      this.picSizeH = this._y2 - this._y1
      if (this.picSizeW > 2 && this.picSizeH > 2) {
        console.info('图片宽高均大于2px，认为可以执行截屏操作')
        this.getShot()
      } else {
        this.ctx.clearRect(0, 0, this.vWidth, this.vHeight)
      }
    },
    onMousemove(e) {
      this._x2 = e.layerX < this.xLeft ? this.xLeft : e.layerX
      this._y2 = e.layerY < this.yTop ? this.yTop : e.layerY
      this.render()
    },
    // 绘制矩形
    render() {
      if (!this.drawing) return
      this.ctx.clearRect(0, 0, this.vWidth, this.vHeight)
      // ctx.drawImage(img, 0, 0, 800, 300)
      this.ctx.fillStyle = 'rgba(225,225,225,0.5)'
      this.ctx.fillRect(0, 0, this.vWidth, this.vHeight)
      const { _x1, _y1, _x2, _y2 } = this
      const w = _x2 - _x1
      const h = _y2 - _y1
      this.ctx.clearRect(_x1, _y1, w, h)
      this.ctx.strokeRect(_x1, _y1, w, h)
    },
    // 绘制新canvas并生成图片
    getShot() {
      const canvasShotId = this.$refs.canvasShot
      const csId_ctx = canvasShotId.getContext('2d')
      const vId = this.$refs[this.videoName]
      canvasShotId.width = this.vWidth
      canvasShotId.height = this.vHeight
      csId_ctx.drawImage(vId, 0, 0, this.vWidth, this.vHeight)
      const { _x1, _y1, _x2, _y2 } = this
      // 获取并存储框选图
      const picSizeW = _x2 - _x1
      const picSizeH = _y2 - _y1
      var imageData = csId_ctx.getImageData(_x1 + 1, _y1 + 1, picSizeW - 2, picSizeH - 2)
      // 重新绘制框选后的整体cancas
      csId_ctx.lineWidth = 2
      csId_ctx.strokeStyle = this.strokeColor
      csId_ctx.fillStyle = 'rgba(225,225,225,0.5)'
      csId_ctx.fillRect(0, 0, this.vWidth, this.vHeight)
      const w = _x2 - _x1
      const h = _y2 - _y1
      csId_ctx.clearRect(_x1, _y1, w, h)
      csId_ctx.strokeRect(_x1, _y1, w, h)
      // 设置框选图标并放到新canvas
      csId_ctx.putImageData(imageData, _x1 + 1, _y1 + 1)
      // 新canvas转成图片
      const picUrl = canvasShotId.toDataURL('image/jpeg')
      const { xRate, yRate } = this
      const opts = {
        picUrl: picUrl,
        topLeft: [Math.round(_x1 * xRate), Math.round(_y1 * yRate)],
        topRight: [Math.round(_x2 * xRate), Math.round(_y1 * yRate)],
        bottomRight: [Math.round(_x2 * xRate), Math.round(_y2 * yRate)],
        bottomLeft: [Math.round(_x1 * xRate), Math.round(_y2 * yRate)]
      }
      console.log(opts, '000----')
      this.$emit('onchange', opts)
    },
    clear() {
      this.ctx.clearRect(0, 0, this.vWidth, this.vHeight)
    }

  }
}
</script>
